<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>我的-邮箱设置</title>

    <link rel="stylesheet" href="../css/mui.min.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <script src="../js/flexible.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/vconsole.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/sm3.js"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="./text.js" type="text/javascript"></script>
    <style>
        html,
        body,
        #app {
            overflow: hidden;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            /* background-size: 100%; */
            background-color: #f6f7f9;
            color: #f7faff;
        }

        .box .a {
            color: black;
            padding: 0.3rem 0.2rem;
            width: 100%;
            /* background: #fff; */
            height: calc(100vh - 2.5rem);
            margin-top: 0.2rem;
        }

        .box .u .c img {
            position: absolute;
            width: 13rem;
            height: 8rem;
            left: 10rem;
        }

        /* WebKit browsers */

        ::-webkit-input-placeholder {
            color: #D8E6FE;
        }

        /* Mozilla Firefox 4 to 18 */

        :-moz-placeholder {
            color: #D8E6FE;
            opacity: 1;
        }

        /* Mozilla Firefox 19+ */

        ::-moz-placeholder {
            color: #D8E6FE;
            opacity: 1;
        }

        /* Internet Explorer 10+ */

        :-ms-input-placeholder {
            color: #D8E6FE;
        }

        .mui-toast-container {
            top: 50%
        }

        .title {
            font-size: 0.3rem;
            display: inline-block;
            width: 100%;
            color: #333;
            display: flex;
            align-items: center;
            /* justify-content: center; */
            /* text-align: right; */
        }

        .tit_img {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }

        .tit_img img {
            width: 100%;
            height: 100%;
        }

        .tit_text {
            font-family: PingFang SC;
            font-weight: 500;
            color: #2d343c;
            font-size: 14px;
        }

        .titleInput {
            outline: 0;
            font-size: 0.27rem;
            /* background-color: rgba(45, 52, 60, 0.05) !important; */
            border-radius: 7px !important;
            border: none !important;
            color: rgb(90 95 100);
            margin: 0.15rem 0;
            padding: 0.1rem 0.1rem;
        }

        .titleInput1 {
            outline: 0;
            font-size: 0.27rem;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff !important;
            border-radius: 7px !important;
            border: none !important;
            color: rgb(90 95 100);
            margin: 0.15rem 0;
            padding: 0 5px 0 0;
        }

        /* WebKit browsers */

        ::-webkit-input-placeholder {
            color: #d8e6fe;
        }

        /* Mozilla Firefox 4 to 18 */

        :-moz-placeholder {
            color: #d8e6fe;
            opacity: 1;
        }

        /* Mozilla Firefox 19+ */

        ::-moz-placeholder {
            color: #d8e6fe;
            opacity: 1;
        }

        /* Internet Explorer 10+ */

        :-ms-input-placeholder {
            color: #d8e6fe;
        }

        .mui-btn,
        button,
        input[type="button"],
        input[type="reset"],
        input[type="submit"] {
            padding: 0;
        }

        .foot {
            background-color: #19AEB0 !important;
            color: #fff;
            border: none;
            font-size: 16px;
            margin: 0 auto;
            border-radius: 38px !important;
            width: 100%;
            text-align: center;
            padding: 0.25rem 0.1rem;
        }

        .wode {
            position: absolute;
            top: 0;
            right: 0;
            width: 80%;
            margin-top: 0.5rem;
        }

        .wode3 {
            position: absolute;
            bottom: 0;
            left: 0;
            margin-bottom: 1rem;
            width: 100%;
        }

        .disabledB {
            font-size: 0.2rem;
            background: none !important;
            margin-bottom: 0px !important;
            background: none !important;
            border: none !important;
            margin-left: 3px;
        }

        .boxtitle {
            font-weight: 600;
            color: #fff;
            margin-right: 0.5rem;
        }

        .boxyz {
            position: relative;
            width: 100%;
            font-size: 0.27rem;
            background-color: rgba(45, 52, 60, 0.05) !important;
            border-radius: 38px !important;
            border: none !important;
            color: rgb(90 95 100);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        input::-webkit-input-placeholder {
            color: rgb(151, 168, 197);
        }

        a {
            color: #fff;
        }

        .yzmInp {
            margin-bottom: 0px !important;
            background: none !important;
            background-color: none !important;
            border-radius: 38px !important;
            border: none !important;
            color: rgb(90 95 100);
        }

        input[type=button] {
            color: #19AEB0;
            border: none !important;
            font-weight: 500;
            background: none !important;
            border-radius: 3px;
            font-size: 12px;
        }

        .yzmBtn {
            margin-left: 3px;
        }
        .van-nav-bar{
background: none !important;;
    }
    </style>
</head>

<body>
    <div class="box" v-cloak>
        <div class="header_tit">
            <van-nav-bar title="邮箱设置" left-arrow>
                <template #left>
                    <div class="back_l" @click="home"><img src="../image/left.png" alt=""></div>
                </template>
            </van-nav-bar>
        </div>
        <div style="padding: 0 0.2rem">
            <div class="a">
                <div class="uldisplay1">
                    <p class="title"><span class="tit_img"><img src="../image/youxiang.png" alt=""></span><span
                            class="tit_text">内网邮箱</span></p>
                    <input type="text" placeholder="请输入内网邮箱" class="titleInput" v-model="toMail" />
                </div>
                <div class="uldisplay1">
                    <p class="title" style="margin-top:10px;"><span span class="tit_img"><img src="../image/yzm.png"
                                alt=""></span><span class="tit_text">验证码</span></p>
                    <div class="titleInput1">
                        <input class="yzmInp" type="text" v-model="verificationNum" placeholder="请输入验证码" /><span
                            style="color:#19AEB0;">|</span>
                        <input v-show="sendAuthCode1" class="yzmBtn" type="button" value="获取验证码" class="yzm"
                            @click="verification " />
                        <button v-show="!sendAuthCode1" type="button" disabled class="disabledB">
                            {{time1}}秒后重新发送
                        </button>
                    </div>
                </div>
               
                <div style="
              padding: 0 0.2rem;
              position: fixed;
              left: 0;
              bottom: .41rem;
              width: 100%;
            ">
                    <p class="btn foot" @click="btn">确认设置</p>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    new Vue({
        el: ".box",
        data() {
            return {
                toMail: "",
                verificationNum: "",
                sendAuthCode1: true,
                time1: 10,
            };
        },
        created() {
            const _this = this
            let jsApiList = []
            $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/, function () {
                'use strict';
                wx.ready(function () {
                    wx.onHistoryBack(() => {
                        _this.home()
                        return false
                    })
                });
                jsApiList = [
                    'onHistoryBack',
                ];
                wx.config({
                    beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: corpid, // 必填，政务微信的cropID
                    timestamp: '1626832073', // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature, // 必填，签名，见附录1
                    jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            });
        },
        methods: {
            // 校验邮箱格式
            verification() {
                if (this.toMail == "") {
                    return mui.toast("内网邮箱不能为空", {
                        duration: "long",
                        type: "div",
                    });
                } else if (this.toMail.indexOf(" ") != -1) {
                    return mui.toast("内网邮箱不能含有空格", {
                        duration: 1300,
                        type: "div",
                    });
                } else {
                    // const mailLast = this.toMail.substring(this.toMail.length - 11, this.toMail.length)
                    const mailMiddle = this.toMail.indexOf("@");
                    if (mailMiddle != -1) {
                        this.checkVerification()
                    } else {
                        return mui.toast("内网邮箱格式不正确", {
                            duration: "long",
                            type: "div",
                        });
                    }
                }
            },
            // 发送验证码
            checkVerification() {
                // let msgUserEmail = sm2.doEncrypt(this.toMail, sessionStorage.getItem("bpuk"), 1)
                userId = sessionStorage.getItem("userId");
                orgId = sessionStorage.getItem("unitId");
                if (sessionStorage.getItem("iscp_port")) {
                    iscp_port = sessionStorage.getItem("iscp_port");
                } else {
                    iscp_port = "";
                }
                let timestamp = new Date().getTime() + ""
                let data = {
                    userId: userId,
                    orgId: orgId,
                    mail: this.toMail,
                    timestamp: timestamp,
                }
                data = JSON.stringify(data);
                let AuthenticationSession = sessionStorage.getItem("Authentication");
                let sign = sm3(data);
                $.ajax({
                    method: "POST", // 请求方式
                    url: localUrlLink + iscp_port + "/tjAiAssistant/email/verCode", //请求后台地址
                    dataType: "json",
                    data: data,
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign,
                        timestamp: timestamp,
                    },
                    success: (res, txt, xhr) => {
                        if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                            let Authentication = xhr.getResponseHeader("Authentication")
                            if (res.code == 200) {
                                if (Authentication) {
                                    this.sendAuthCode1 = false;
                                    this.time1 = 180;
                                    const timetimer1 = setInterval(() => {
                                        this.time1--;
                                        if (this.time1 <= 0) {
                                            this.sendAuthCode1 = true;
                                            clearInterval(timetimer1);
                                        }
                                    }, 1000);
                                    sessionStorage.setItem("Authentication", Authentication);
                                    mui.toast('验证码已发送至内网邮箱！', {
                                        duration: 'long',
                                        type: 'div'
                                    })
                                    addOperator(4, 6, "发送验证码", 1, 1, "发送验证码成功");
                                } else {
                                    mui.toast('令牌校验失败', {
                                        duration: 'long',
                                        type: 'div'
                                    })
                                }
                            } else {
                                mui.toast(res.resultValue, {
                                    duration: 'long',
                                    type: 'div'
                                })
                                addOperator(4, 6, "发送验证码", 1, 0, "发送验证码失败");
                            }
                        } else {
                            mui.toast('完整性校验失败', {
                                duration: 'long',
                                type: 'div'
                            })
                        }
                    },
                    error: function (e) {
                        mui.toast("请稍后再试！", {
                            duration: 'long',
                            type: 'div'
                        })
                    },
                })
            },
            // 确认设置 调用接口
            btn() {
                if (this.toMail == "" || this.verificationNum == "") {
                    return mui.toast("内网邮箱和验证码不能为空", {
                        duration: "long",
                        type: "div",
                    });
                }
                userId = sessionStorage.getItem("userId");
                orgId = sessionStorage.getItem("unitId");
                if (sessionStorage.getItem("iscp_port")) {
                    iscp_port = sessionStorage.getItem("iscp_port");
                } else {
                    iscp_port = "";
                }

                let data = {
                    userId: userId,
                    orgId: orgId,
                    securityCode: this.verificationNum,
                    timestamp: new Date().getTime() + "",
                }
                data = JSON.stringify(data);
                let AuthenticationSession =
                    sessionStorage.getItem("Authentication");
                let sign = sm3(data);
                $.ajax({
                    method: "POST", // 请求方式
                    url: localUrlLink + iscp_port + "/tjAiAssistant/email/verifyCode", //请求后台地址
                    dataType: "json",
                    data: data,
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign,
                    },
                    success: (res, txt, xhr) => {
                        if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                            let Authentication = xhr.getResponseHeader("Authentication")
                            if (res.code == 200) {
                                if (Authentication) {
                                    sessionStorage.setItem("Authentication", Authentication);
                                    addOperator(4, 1, "邮箱设置", 1, 1, '设置邮箱成功');
                                    sessionStorage.setItem("toMail", res.resultValue);
                                    mui.toast("设置成功", {
                                        duration: "long",
                                        type: "div",
                                    })
                                    this.home()
                                }
                            } else {
                                mui.toast("请稍后再试！", {
                                    duration: "long",
                                    type: "div",
                                });
                                addOperator(4, 1, "邮箱设置", 1, 0, '设置邮箱失败');
                            }
                        } else {
                            mui.toast("完整性校验失败", {
                                duration: "long",
                                type: "div",
                            });
                        }
                    },
                    error: function (e) {
                        mui.toast("请稍后再试！", {
                            duration: 'long',
                            type: 'div'
                        })
                    },
                });
                
            },
            home() {
                $(location).attr("href", "Home.html");
            },
        },
    });
</script>

</html>